<template>
	<view class="mycollection">
		<view class="administration" @tap="cut">
			{{isCut?'管理':'完成'}}
		</view>
		<u-tabs :current="current" :list="list1" @change="click" active-color="#FF7200" inactive-color="#333333">
		</u-tabs>
		<view class="allshops" v-if="current==0">
			<view class="allshops-box-box" v-for="(itemq,indexq) in datas" :key="indexq" :class="itemq.isShelf?'allOrder-box':'disableActive'">
				<view class="allshops-box-left" v-show="!isCut">
					<image src="../../../static/select.png" v-if="itemq.checked" class="checked-image" mode="" @tap="storeCheck(indexq)"></image>
					<image src="../../../static/not_select.png" v-else class="checked-image" mode="" @tap="storeCheck(indexq)"></image>
				</view>
				<view class="allshops-box-middle">
					<image :src="itemq.image" mode="" class="shop-img"></image>
					<image v-show="itemq.grounding==0" class="img-active" src="../../../static/publicwelfare/putontheshelf.png" mode=""></image>
				</view>
				<view class="allshops-box-right">
					<view class="shop-text">
						{{itemq.name}}
					</view>
					<text>5万+人收藏</text>
					<text>{{itemq.price}}积分</text>
				</view>
			</view>
		</view>
		<view class="offtheshelf" v-if="current==1">
			<view class="disableActive" v-for="(itemq,indexq) in datas2" :key="indexq">
				<view class="allshops-box-left" v-show="!isCut">
					<image src="../../../static/select.png" v-if="itemq.checked" class="checked-image" mode="" @tap="storeCheck(indexq)"></image>
					<image src="../../../static/not_select.png" v-else class="checked-image" mode="" @tap="storeCheck(indexq)"></image>
				</view>
				<view class="allshops-box-middle">
					<image :src="itemq.image" mode="" class="shop-img"></image>
					<image class="img-active" src="../../../static/publicwelfare/putontheshelf.png" mode=""></image>
				</view>
				<view class="allshops-box-right">
					<view class="shop-text">
						{{itemq.name}}
					</view>
					<text>5万+人收藏</text>
					<text>{{itemq.price}}积分</text>
				</view>
			</view>
		</view>
		<view class="operation" v-if="!isCut">
			<view class="num">
				已选择<text style="color: #FF7200;font-size: 32rpx;">1</text>件商品
			</view>
			<view class="operation-box">
				<view class="operation-box-left" v-if="statisticsIndex" @tap="allseleted">
					<image src="../../../static/select.png"  class="checked-image" mode="" >
					</image>
					<text>全选</text>
				</view>
				<view class="operation-box-left" v-else @tap="allseleted">
					<image src="../../../static/not_select.png"  class="checked-image" mode="" >
					</image>
					<text>全选</text>
				</view>
				<view class="operation-box-right">
					<text class="btn">加入购物车</text>
					<text class="btn">分享</text>
					<text class="btn" style="border-color: #FF7200;color: #FF7200;" @click="deletes">删除</text>
				</view>
			</view>
		</view>
	
		<!-- 删除弹框 -->
		<view class="delete-box" v-show="isModel">
			<view class="delete">
				<view class="delete-top">
					确定将这1个商品删除？
				</view>
				<view class="delete-bottom">
					<view class="delete-bottom-left" @click="isModel=false">
						我在想想
					</view>
					<view class="delete-bottom-right" @click="isModel=false">
						删除
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {collectList} from '@/service/goods.js' //收藏列表
	export default {
		components:{
		},
		data() {
			return {
				params:{
					limit:20,
					page:1
				},
				isModel:false,//删除弹框
				list1: [{
					name: '全部商品',
				}, {
					name: '下架商品',
				}],
				current: 0,
				isCut:true,//默认管理
				datas:[
				// 	{
				// 	checked:false,//false未勾选 true--勾选
 			// 		img:require('../../../static/publicwelfare/offtheshelf.png'),
				// 	title:'三奇医疗 3层 一次性医用外科口罩轻薄成人3层医用口罩 1成人3层医用口罩 ',
				// 	isShelf:1,//1:上架 0:下架
				// },{
				// 	checked:false,//false未勾选 true--勾选
				// 	img:require('../../../static/publicwelfare/offtheshelf.png'),
				// 	title:'三奇医疗 3层 一次性医用外科口罩轻薄成人3层医用口罩 1成人3层医用口罩 ',
				// 	isShelf:0,//1:上架 0:下架
				// },
				],
				datas2:[],
				statisticsIndex:false,//false--没有全选 true--全选
			}
		},
		onLoad() {
			this.getcollectList()
		},
		methods: {
			//获取收藏列表
			getcollectList(){
				collectList(this.params).then(res=>{
					let arr = res.data.data
					arr.forEach(item=>{
						if(item.grounding==0){//未上架
							this.datas2 = res.data.data
						}else{//1==上架
							this.datas = res.data.data
						}
					})
					
				})
			},
			//删除弹框
			deletes(){
				let judge = this.judgeSelect()
				if(judge){
					this.isModel = true
				}else{
					uni.showToast({
						title:'您当前未选择任何商品,删除失败',
						icon:'none'
					})
				}
			},
			judgeSelect(){
				let judge = false
				this.datas.find((item,index)=>{
					if(item.checked == true){
						judge = true
					}
				})
				return judge
			},
			click(item) {
				this.current = item
				this.datas.find((item2,index)=>{
						item2.checked = false
						this.statisticsIndex = false
						this.getcollectList()
				})
			},
			//控制管理 完成按钮
			cut(){
				this.isCut = !this.isCut
			},
			//勾选商品
			storeCheck(indexq){
				// console.log(indexq,'索引');
				for(let i=0;i<this.datas.length;i++){
					if(indexq==i){
						this.datas[i].checked=!this.datas[i].checked
					}
				}
				//判断是否全选
				let statisticsIndex = true
				this.datas.find((item,index)=>{
					if(item.checked == false){ // false未勾选 true--勾选
						statisticsIndex = false
					}
				})
				if(statisticsIndex == false){
					this.statisticsIndex = false
				}else{
					this.statisticsIndex = true
				}
			},
			//全选
			allseleted(){
				if(this.statisticsIndex){
					console.log('全选');
					this.datas.find((item,index)=>{
						item.checked = false
					})
					this.statisticsIndex = false
				}else{
					console.log('没有全选');
					this.datas.find((item,index)=>{
						item.checked = true
					})
					this.statisticsIndex = true
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.delete-box{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(142,141,140,0.82);
		.delete{
			position: absolute;
			top: 30%;
			left: 0;
			right: 0;
			margin: auto;
			width: 560rpx;
			height: 232rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.delete-top{
				width: 100%;
				height: 116rpx;
				line-height: 116rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				border-bottom: 1px solid #F2F2F2;
			}
			.delete-bottom{
				width: 100%;
				height: 116rpx;
				line-height: 116rpx;
				display: flex;
				.delete-bottom-left{
					flex: 1;
					border-right: 1px solid #F2F2F2;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}
				.delete-bottom-right{
					flex: 1;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
					text-align: center;
				}
			}
		}
	}
	.img-active{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		width:140rpx ;
		height: 140rpx;
	}
	.allshops-box-middle{
		margin: 0 30rpx;
		position: relative;
	}
	.checked-image{
		width: 36rpx;
		height: 36rpx;
	}
	.allshops-box-right{
		display: flex;
		flex-direction: column;
		text:first-child{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			margin: 20rpx 0;
		}
		text:last-child{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF0000;
		}
		.shop-text{
			 display: -webkit-box;
			  /*! autoprefixer: off */
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 2;
			  overflow: hidden;
		}
	}
	.shop-img{
		width: 172rpx;
		height: 172rpx;
	}
	.allshops-box-box{
		padding: 10rpx 28rpx;
		width: 100%;
		height: 194rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}
	.disableActive{
		padding: 10rpx 28rpx;
		width: 100%;
		height: 194rpx;
		background: #CFCFCF;
		opacity: 0.6;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}
	.allshops-box{
		padding: 10rpx 28rpx;
		width: 100%;
		height: 194rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}
	.btn{
		padding: 5rpx 10rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 2rpx solid #999999;
		opacity: 1;
		border-radius: 24rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-right: 20rpx;
	}
	.operation{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 128rpx;
		background: #FFFFFF;
		opacity: 1;
		padding: 0!important;
		.num{
			color: #999999;
			font-size: 24rpx;
			margin-left: 40rpx;
		}
		.operation-box{
			display: flex;
			justify-content: space-between;
			padding:25rpx 40rpx;
			align-items: center;
			.operation-box-left{
				display: flex;
				justify-content: center;
				align-items: center;
				text{
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-left: 16rpx;
				}
			}
			
		}
	}
	.mycollection{
		padding: 40rpx;
	}
	.administration{
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: right;
	}
/deep/.u-tab-bar{
	display: none;
}
/deep/.u-tabs{
	background-color: #EFEFEF !important;
}
/deep/.u-tab-item{
	font-size: 36rpx !important;
}
</style>
